<template>
  <div class="flex flex-col min-h-screen overflow-hidden">
    <!-- Site header -->
    <Header />

    <!-- Page content -->
    <main class="grow">
      <ServicesBanner :params="bannerParams" />
      <!-- What Is Sheet Metal Fabrication -->
      <SheetMetalFabrication />
      <!-- The Process Of Sheet Metal Fabrication Involves Several Key Steps -->
      <ProcessOfSheetMetal />
      <!-- Available Surface Treatment -->
      <SurfaceTreatment />
      <!-- Sheet Metal Applications -->
      <SheetMetalApplications />
      <!-- Advantages of Sheet Metal Fabrication -->
      <AdvantagesOfSheetMetal />
      <!-- Blogs -->
    </main>
    <!-- Site footer -->
    <Footer />
  </div>
</template>

<script setup>
import Header from '../../components/common/Header.vue'
import Footer from '/src/components/common/Footer.vue'
import ServicesBanner from "../../components/ServicesBanner.vue";
import SheetMetalFabrication from "../../components/Services/SheetMetal/SheetMetalFabrication.vue";
import ProcessOfSheetMetal from "../../components/Services/SheetMetal/ProcessOfSheetMetal.vue";
import SurfaceTreatment from "../../components/Services/SheetMetal/SurfaceTreatment.vue";
import AdvantagesOfSheetMetal from "../../components/Services/SheetMetal/AdvantagesOfSheetMetal.vue";
import SheetMetalApplications from "../../components/Services/SheetMetal/SheetMetalApplications.vue";

import banner from "/src/images/services/banner-sheet-metal.webp";

const bannerParams = {
  imgUrl: banner,
  title: 'Sheet metal service',
  subtitle: [
    'Sheet metal prototypes and low-volume production components in as fast as 1 day.',
  ]
}
</script>

<style scoped></style>
